<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox  color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>
		
		<view class="container" >	
			<view class="top">
				<scroll-view 
					class="scroll-view_H" 
					scroll-x="true" 
					scroll-left="0" 
					v-for="(item,index) in cartList"
					:key="item.id"
				>
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<!-- <checkbox-group >
									<checkbox
										color="#FF6040" 
										:checked="true"
										value="1"
									/>
								</checkbox-group> -->
								
								<switch type="checkbox" :checked="item.status"  @change="status1(index)" color="#ff6040" />
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>
		
							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥200</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="ans(index)" >－</label>
									<label >{{item.num}}</label>
									<label @click="as(index)" >＋</label>
								</view>
							</view>
						</view>
		
					</view>
					<view class="cartDel" id="demo2"  @click="removeL(index)">
						<label for="" >删除</label>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
				<!-- 	<checkbox-group  @change="changeAll">
						<checkbox  color="#FF6040" value="1"  :checked="true"  />
					</checkbox-group> -->
					<switch type="checkbox"  @change="status2" :checked="allstatus" color="#ff6040" />
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{allPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity"  @click="toorder">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{allNum}}件)</label>
				</view>
			</view>
		
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>

	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components:{cartnull},
		data() {
			return {
				cartList:[],//初始化购物车数据
				buffer: true, //检测购物车是否有数据
			}
		},
		// 页面显示时
		onShow() {
			this.cartlist()
		},
		// 计算属性
		computed:{
			// 全选状态
			allstatus(){
				return this.cartList.every(item=>{
					return item.status
				})
			},
			
			// 总价格
			allPrice(){
				let all=0;
				this.cartList.forEach(item=>{
					if(item.status==true){
						all+=item.price*item.num
					}
				})
				
				return all
			},
			
			// 总数量
			allNum(){
				let num=0;
				this.cartList.forEach(item=>{
					if(item.status==true){
						num+=item.num
					}
				})
				return num
			}
			
			
		},
		methods:{
			// 跳转到订单页
			toorder(){
				
				// 拿到选中的项  filter符合条件的项返回出来
				let newcartlist= this.cartList.filter(item=>{
					return item.status

				})
				if(newcartlist.length==0){
					uni.showToast({
						title:"暂无可结算的商品",
						icon:"errer"
					})
					return
				}
				uni.setStorageSync("orderlist",{newcartlist,allPrice:this.allPrice,allNum:this.allNum})
				
				
				console.log(newcartlist);
			   
				uni.navigateTo({
					url:"/pages/order/order"
				})
			},
			
			status1(index){
				this.cartList[index].status=!this.cartList[index].status
			},
			// 加减 调用修改接口 http://localhost:3000/api/cartedit
			async ans(index){
				if(this.cartList[index].num <=1){
					uni.showToast({
						title:"不能再减了",
						icon:"error"
					})
					return
				}
				let userinfo = uni.getStorageSync("userinfo")
				let {token}=userinfo
				let [err,res]=await uni.request({
					url:this.$baseUrl + "/api/cartedit",
					method:"POST",
					header:{
						authorization:token
					},
					data:{
						id:this.cartList[index].id,
						type:1
					}
				})
				  if (err) {
				  	uni.showToast({
				  		title: "出错了",
				  		icon: "error"
				  	})
				  	return
				  }
				  if (res.data.code == 403) {
				  	uni.showToast({
				  		title: "登录过期"
				  	})
				  	setTimeout(() => {
				  		uni.navigateTo({
				  			url: "/pages/login/login"
				  		})
				  	}, 1000)
				  	return
				  }
				  if (res.data.code != 200) {
				  	uni.showToast({
				  		title: "出错了",
				  		icon: "error"
				  	})
				  	return
				  }
				  console.log(res);
				  this.cartlist()
			},
			// 加 加
			async as(index){
				let userinfo = uni.getStorageSync("userinfo")
				let {token}=userinfo
				let [err,res] = await uni.request({
					url:this.$baseUrl + "/api/cartedit",
					method: "POST",
					header: {
						authorization: token
					},
					data: {
						id: this.cartList[index].id,
						type: 2
					},
				})
				if (err) {
					uni.showToast({
						title: "出错了",
						icon: "error"
					})
					return
				}
				if (res.data.code == 403) {
					uni.showToast({
						title: "登录过期"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1000)
					return
				}
				if (res.data.code != 200) {
					uni.showToast({
						title: "出错了",
						icon: "error"
					})
					return
				}
				this.cartlist()
				
			},
			
			// 删除接口 http://localhost:3000/api/cartdelete
			async removeL(index){
				let userinfo = uni.getStorageSync("userinfo")
				let {token}=userinfo
				let [err,res]= await uni.request({
					url:this.$baseUrl + "/api/cartdelete",
					method: "POST",
					header: {
						authorization: token
					},
					data: {
						id: this.cartList[index].id
					}
				})
				if (err) {
					uni.showToast({
						title: "出错了",
						icon: "error"
					})
					return
				}
				if (res.data.code == 403) {
					uni.showToast({
						title: "登录过期"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1000)
					return
				}
				if (res.data.code != 200) {
					uni.showToast({
						title: "出错了",
						icon: "error"
					})
					return
				}
				this.cartlist()
			},
			
			// 点击全选
			status2(){
				this.cartList.forEach(item=>{
					item.status=!item.status
				})
			},
			
			
			// 获取购物车数据 http://localhost:3000/api/cartlist
			async cartlist(){
				let userinfo=uni.getStorageSync("userinfo")
				if(!userinfo){
						uni.showToast({
						title:"请先登录",
						icon:"error"
					 })
									
							
			    setTimeout(()=>{
					 uni.navigateTo({
						 url:"/pages/login/login"
					 })
										 
				 },1000)
					 return
				}
				
				let {token,uid}=userinfo
				let [err,res]=await uni.request({
					url:this.$baseUrl+"/api/cartlist",
					header:{
						authorization:token
					},
					data:{
						uid
					}
				})
				
				if(err){
					 uni.showToast({
							title:"出错了",
							icon:"error"
						 })
				 return
				}
				if(res.data.code==403){
						uni.showToast({
						title:"登录过期",
						icon:"error"
					 })
				 setTimeout(()=>{
					 uni.navigateTo({
							 url:"/pages/login/login"
						  })
									 						 
					 },1000)
									 
					 return
									 
				}
				if(res.data.code !=200){
					 uni.showToast({
							title:"出错了",
							icon:"error"
						 })
									 
					 return
				}
				if(!res.data.list){
					this.buffer=false
					return
				}
				this.buffer=true
				console.log(res);
				
				res.data.list.forEach(item=>{
					item.img=this.$baseUrl+item.img
					item.status=Boolean(item.status)
				})
				this.cartList=res.data.list
				
			}
		}
}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
